<template>
  <a-modal title="选择视频" v-model:visible="visible" width="1000px" @ok="save">
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
      <a-tab-pane :key="8" tab="横板"></a-tab-pane>
      <a-tab-pane :key="9" tab="竖版"></a-tab-pane>
    </a-tabs>

    <div v-if="loading" class="loading-container">
      <a-spin />
    </div>
    <div v-if="!loading" class="video-list">
      <div v-for="item in videoList" :key="item.id">
        <div>
          <video
            class="video-item"
            :src="'http://t1.market.xiaomi.com/download/' + item.url"
            controls
          ></video>
        </div>
        <div class="video-info">
          <div :title="item.name" class="video-name">
            <a-checkbox :checked="selectedVideo.id === item.id" @change="handleSelectVideo(item)"></a-checkbox>
            {{ item.name }}
          </div>
          <div>{{ formattedSize(item.size) }}，{{ item.duration / 1000 }} s，{{ item.width }}x{{ item.height }}</div>
        </div>
      </div>
    </div>
    <a-pagination
      class="pagination-container"
      v-model:current="current"
      :total="total"
      :page-size="pageSize"
      show-less-items
      @change="handlePageChange"
      v-if="videoList.length > 0"
    />
    <div v-if="videoList.length === 0 && !loading">
      <a-empty />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { queryAdxMaterialList } from "@/api/adx-tool";
import _ from "lodash";
import { message } from "ant-design-vue";
import { formattedSize } from "@/pages/NewBatchCreateAd/tool";

const visible = ref(false);
const loading = ref(false);

const { accountId } = defineProps({
  accountId: {
    type: Number,
    required: true,
  },
});

const activeKey = ref(8);
const videoList: any = ref([]);

const handleTabChange = (key: number) => {
  activeKey.value = key;
  requestData(1, key);
};

// 分页相关
const current = ref(1);
const total = ref();
const pageSize = ref(30);

const handlePageChange = (page: number) => {
  current.value = page;
  requestData(page, activeKey.value);
};

// 请求数据
const requestData = async (page: number, specType: number) => {
  videoList.value = [];
  loading.value = true;
  try {
    const res = await queryAdxMaterialList({
      AccountId: accountId,
      extParam: {
        specType,
        page: page,
        pageSize: 30,
      },
    });
    total.value = res.page_info.total_number;
    videoList.value = [...res.list];
  } catch (error) {
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  requestData(1, 8);
});

// 选择视频相关
const selectedVideo: any = ref({});
const handleSelectVideo = (item: any) => {
  selectedVideo.value = item;
};

const emit = defineEmits(["update:selectedVideo"]);
const save = () => {
  if (_.isEmpty(selectedVideo.value)) {
    message.error("请选择视频");
    return;
  }
  emit("update:selectedVideo", selectedVideo.value);
};

const show = () => {
  visible.value = true;
};
const hide = () => {
  visible.value = false;
};
const reset = () => {
  selectedVideo.value = {};
};
// 导出给父组件使用的方法
defineExpose({
  show,
  hide,
  reset,
});
</script>

<style scoped lang="less">
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  height: 100%;
}
.video-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  max-height: 500px;
  overflow-y: auto;
}
.video-info {
  width: 220px;
  font-size: 12px;
  color: #666;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

// 视频样式
.video-item {
  width: 220px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
}
</style>
